<script lang="tsx" setup>
/**
 * 头部
 */
import {dateAddZero} from "@/frame/utils/data-helper/add-zero.ts"
import {onMounted, onUnmounted, ref} from "vue"
import WeatherBox from "@/components/module/weather-box/index.vue"

/**
 * 定义props
 */
const props = defineProps<{
  refreshTime: any
}>()

/**
 * 定时器
 */
const timer = ref()

/**
 * 天气、时间数据
 */
const timeData = ref()

/**
 * 挂载
 */
onMounted(() => {
  init()
  timer.value = setInterval(() => {
    getTimeData()
  }, 1000)
})

/**
 * 取消挂载
 */
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

/**
 * 初始化
 */
const init = () => {
  getTimeData()
}

const getTimeData = () => {
  const time = new Date()
  const year = time.getFullYear()
  const month = dateAddZero(time.getMonth() + 1)
  const day = dateAddZero(time.getDate())
  const hours = dateAddZero(time.getHours())
  const minutes = dateAddZero(time.getMinutes())
  const seconds = dateAddZero(time.getSeconds())
  timeData.value = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
}
</script>

<template>
  <div class="header-form">
    <img alt="" class="header-title" src="/img/data-cockpit/header/title.png"/>
    <div class="header-weather">
      <div class="weather-time">
        最新刷新时间：{{ refreshTime }}
      </div>
      <div class="weather-date">
        {{ timeData }}
      </div>
      <div class="weather-line"></div>
      <WeatherBox/>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>